﻿@model IEnumerable<System.Web.Mvc.SelectListItem>
@{
    string prefix = ViewData["Prefix"].ConvertTo<string>("");
    string title = ViewData["ListTitle"].ConvertTo<string>("");
    string selectedTitle = ViewData["ListSeletedTitle"].ConvertTo<string>("");
    string unselectedTitle = ViewData["ListUnselectedTitle"].ConvertTo<string>("");
}
@if (this.Model != null)
{
    <script type="text/javascript">
        function @(prefix)ToggleSelect(ele, selected) {
            var tbl = $(ele).parents('table').eq(0);
            var ustd = $("#@(prefix)unselectedItems", tbl);
            var std = $("#@(prefix)selectedItems", tbl);
            var items = [];
            if (selected) {
                $.each($("input:checkbox[checked]", ustd), function (i, item) {
                    $(item).removeAttr('checked');
                    items.push($(item).parents("div").eq(0));
                });
                $.each(items, function (i, item) {
                    $(item).remove();
                    std.append($(item));
                });
            }
            else {
                $.each($("input:checkbox[checked]", std), function (i, item) {
                    $(item).removeAttr('checked');
                    items.push($(item).parents("div").eq(0));
                });
                $.each(items, function (i, item) {
                    $(item).remove();
                    ustd.append($(item));
                });
            }
            var sel = [];
            $.each($("input:checkbox", std), function (i, item) {
                sel.push($(item).val());
            });
            $('#@(prefix)SelectedValues').val(sel.join(','));
        }
    </script>
    <div class="listbox-container">
        <h3>@title</h3>
        <table>
            <tr>
                <td>@unselectedTitle
                </td>
                <td>
                </td>
                <td>@selectedTitle
                </td>
            </tr>
            <tr>
                <td id="@(prefix)unselectedItems" valign="top" style="border:solid 1px black;">
                    @foreach (var item in Model.Where(o => !o.Selected))
                    {
                        <div id="container_@(item.Value)">
                            <input id="cb_@(item.Value)" name="cb_@(item.Value)" value="@item.Value" type="checkbox" />
                            <label for="cb_@(item.Value)">@item.Text</label>
                        </div>
                    }
                </td>
                <td>
                    <button type="button" onclick="@(prefix)ToggleSelect(this, false);">
                        <img src="@Theme.Image("arrow-left.png")" alt="" /></button>
                    <br />
                    <button type="button" onclick="@(prefix)ToggleSelect(this, true);">
                        <img src="@Theme.Image("arrow-right.png")" alt="" /></button>
                </td>
                <td id="@(prefix)selectedItems" valign="top" style="border:solid 1px black;">
                    @foreach (var item in Model.Where(o => o.Selected))
                    {
                        <div id="container_@(item.Value)">
                            <input id="cb_@(item.Value)" name="cb_@(item.Value)" value="@item.Value" type="checkbox" />
                            <label for="cb_@(item.Value)">@item.Text</label>
                        </div>
                    }
                    <input type="hidden" id="@(prefix)SelectedValues" name="@(prefix)SelectedValues" value="" />
                </td>
            </tr>
        </table>
    </div>
}